<template>
  <div id="divma">
     <el-button id="el-button" type="primary" icon="el-icon-arrow-left" @click="back">返回</el-button>
    <div id="divmale">
      <div id="tablediv">
        <p><span>编辑会员</span></p>
      </div>
      <div id="mleupload">
         <el-upload ref='upload'  action="/gym/uploadImage" list-type="picture-card" name="image" :auto-upload="true" :limit="1" :on-success="upload">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)">
                <i class="el-icon-download"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)">
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <p id="mlespan2">建议正方形图片，大小不超过2M。支持格式jpg、jpeg、gif、png</p>
      </div>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
      <!-- ------------------------ -->
      <p>
        <span style="color: red">*</span> 会员等级：
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline">
          <el-select v-model="formInline.region" placeholder="批量操作">
            <el-option v-for="(v,i) in arr" :key="i" :label="v.gradeName" :value="v.id"></el-option>
          </el-select>
          <p id="mlap1">
          <span style="color: red">*</span>
            姓名：
            <el-input v-model="formInline.name" placeholder="请输入"></el-input>
          </p>
          <p id="radioel">
            <span style="color: red">*</span> 性别：
            <el-radio id="radioel1" v-model="radio" label="1">男</el-radio>
            <el-radio v-model="radio" label="0">女</el-radio>
          </p>
          <p id="mlap1">
            <span style="color: red">*</span>
            手机：
            <el-input
              v-model="formInline.tel"
              placeholder="请输入手机号"
              oninput="value=value.replace(/[^\d]/g,'')"
            ></el-input>
          </p>
          <p id="mlap2">
            微信：
            <el-input
              v-model="formInline.wechat"
              placeholder="请输入微信号"></el-input>
          </p>
          <p id="mlap2">
            昵称：
            <el-input
              v-model="formInline.nickname"
              placeholder="请输入昵称"
            ></el-input>
          </p>
          <div class="block">
            生日：
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日">
            </el-date-picker>
          </div>
          <p id="mlap3">
            身份证：
            <el-input
              v-model="formInline.idNumber"
              placeholder="请输入身份证号"
              oninput="value=value.replace(/[^\d]/g,'')"
            ></el-input>
          </p>
          <p id="mlap4">
            城市：
            <el-cascader
              :options="options"
              :v-model="val"
              @change="handleChange"
              :show-all-levels="false"></el-cascader>
          </p>
          <p id="mlap3">
            职业：
            <el-input
              v-model="formInline.profession"
              placeholder="请填写职业"></el-input>
          </p>
          <p id="mlap5">
            身高(cm)：
            <el-input
              v-model="formInline.height"
              placeholder="请填写身高"></el-input>
          </p>
          <p id="mlap5">
            体重(kg)：
            <el-input
              v-model="formInline.weight"
              placeholder="请填写体重"></el-input>
          </p>
           <p id="mlap5">
            个性签名：
            <el-input
              v-model="formInline.autograph"
              placeholder="请输入"
            ></el-input>
          </p>
          <p id="mlebut1">
            健身经验：
            <el-radio id="radioel1" v-model="radio1" label="健身小白">健身小白</el-radio>
            <el-radio v-model="radio1" label="健身爱好者">健身爱好者</el-radio>
            <el-radio v-model="radio1" label="健身教练">健身教练</el-radio>
          </p>
          <div id="mlebut2">
            <p>健身目的：</p> 
            <el-tag
              :key="tag"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)">
              {{ tag }}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm">
            </el-input>
          </div>
          <p id="mleop">
            教练：
             <el-select v-model="formInline.region1" placeholder="请选择教练">
            <el-option v-for="(v,i) in arr1" :key="i" :label="v.name" :value="v.id"></el-option>
          </el-select>
          </p>
          <p id="mleca">
            所属场馆：
            <el-select v-model="formInline.regionplace" placeholder="请选择场馆">
              <el-option v-for="(v,i) in arr2" :key="i" :label="v.spaceName" :value="v.id"></el-option>
            </el-select>
          </p>
           <p id="mlecb">
            状态：
            <el-radio id="radioel1" v-model="radio3" label="1">启用</el-radio>
            <el-radio v-model="radio3" label="0">停用</el-radio>
          </p>
          <el-form-item>
            <el-button type="primary" @click="notarize">保存</el-button>
          </el-form-item>
        </el-form>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,  //上传照片
      val: [],//城市连选值
      checkList: ["选中且禁用", "复选框 A"],
      value1: "",
      dynamicTags: ["想要减肥", "想要增脂", "想要增肌", "想要修身"],
      inputVisible: false,
      inputValue: "",
      id:"",//后台传来的id
      res:[],//后台返回的数据
      arr:[],//后台传来的会员等级类
      arr2:[],//后台传来的场地
      arr1:[],
      str1:"",//图片地址
      ass:"",//列表页传来的数据渲染到输入框中
      radio: "1",
      radio1:"健身小白",
      radio2:"健身仓山馆",
      radio3:"1",
      str:'',//健身目的
      formInline: {
        start: "",
        name:"",
        tel:"",
        wechat:"",
        nickname:"",
        idNumber:"",
        profession:"",//职业
        height:"",
        weight:"",
        autograph:"",//个性签名
        out: "",
        region:"",
        region1:"",
        regionplace:""//场地
      },

      options: [   //城市二级菜单
        {
          label: "北京市",
          value: "北京市",
          children: [{ label: "北京市", value: "北京市" }],
        },

        {
          label: "天津市",
          value: "天津市",
          children: [{ label: "天津市", value: "天津市" }],
        },

        {
          label: "河北省",
          value: "河北省",
          children: [
            { label: "石家庄市", value: "石家庄市" },
            { label: "唐山市", value: "唐山市" },
            { label: "秦皇岛市", value: "秦皇岛市" },
            { label: "邯郸市", value: "邯郸市" },
          ],
        },
        {
          label: "山西省",
          value: "山西省",
          children: [
            { label: "太原市", value: "太原市" },
            { label: "大同市", value: "大同市" },
            { label: "阳泉市", value: "阳泉市" },
            { label: "长治市", value: "长治市" },
          ],
        },
        {
          label: "内蒙古自治区",
          value: "内蒙古自治区",
          children: [
            { label: "呼和浩特市", value: "呼和浩特市" },
            { label: "包头市", value: "包头市" },
            { label: "乌海市", value: "乌海市" },
            { label: "赤峰市", value: "赤峰市" },
          ],
        },
        {
          label: "辽宁省",
          value: "辽宁省",
          children: [
            { label: "沈阳市", value: "沈阳市" },
            { label: "大连市", value: "大连市" },
            { label: "鞍山市", value: "鞍山市" },
            { label: "抚顺市", value: "抚顺市" },
          ],
        },
        {
          label: "吉林省",
          value: "吉林省",
          children: [
            { label: "长春市", value: "长春市" },
            { label: "吉林市", value: "吉林市" },
            { label: "四平市", value: "四平市" },
            { label: "通化市", value: "通化市" },
          ],
        },
        {
          label: "黑龙江省",
          value: "黑龙江省",
          children: [
            { label: "延边朝鲜族自治州", value: "延边朝鲜族自治州" },
            { label: "牡丹江市", value: "牡丹江市" },
            { label: "大兴安岭地区", value: "大兴安岭地区" },
            { label: "大庆市", value: "大庆市" },
          ],
        },
        {
          label: "上海市",
          value: "上海市",
          children: [{ label: "上海市", value: "上海市" }],
        },
        {
          label: "江苏省",
          value: "江苏省",
          children: [
            { label: "南京市", value: "南京市" },
            { label: "无锡市", value: "无锡市" },
            { label: "徐州市", value: "徐州市" },
            { label: "苏州市", value: "苏州市" },
          ],
        },
        {
          label: "浙江省",
          value: "浙江省",
          children: [
            { label: "嘉兴市", value: "嘉兴市" },
            { label: "绍兴市", value: "绍兴市" },
            { label: "金华市", value: "金华市" },
            { label: "台州市", value: "台州市" },
          ],
        },
        {
          label: "安徽省",
          value: "安徽省",
          children: [
            { label: "蚌埠市", value: "蚌埠市" },
            { label: "淮北市", value: "淮北市" },
            { label: "黄山市", value: "黄山市" },
            { label: "阜阳市", value: "阜阳市" },
          ],
        },
        {
          label: "福建省",
          value: "福建省",
          children: [
            { label: "三明市", value: "三明市" },
            { label: "宁德市", value: "宁德市" },
            { label: "泉州市", value: "泉州市" },
            { label: "莆田市", value: "莆田市" },
          ],
        },
      ],
    };
  },

  methods: {
    back(){
      this.$router.back()
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    upload(response, file, fileList){ //后台传来的图片
      this.str=response.data    
    },

    handleDownload(file) {
      console.log(file);
    },

    handleRemove(file) {
      this.$refs.upload.clearFiles();
    },

    submitUpload() {
      this.$refs.upload.submit();
    },

    notarize() { //编辑会员  
      this.str=this.dynamicTags.toString()
      console.log(this.formInline.region);
      this.$axios({
        url:"/gym/user/update",
        method:"post",
        data:{
          id:this.id,
          image:this.str,
          gradeId:this.formInline.region,
          name:this.formInline.name,
          sex:this.radio,
          phone:this.formInline.tel,
          wechat:this.formInline.wechat,
          nickname:this.formInline.nickname,
          birthday:this.value1,
          idNumber:this.formInline.idNumber,
          city:this.val,
          job:this.formInline.profession,
          height:this.formInline.height,
          weight:this.formInline.weight,
          autograph:this.formInline.autograph,
          experience:this.radio1,
          purpose:this.str,
          coachId:this.formInline.region1,
          venueId:this.formInline.regionplace,
          status:this.radio3
        }
      }).then((res)=>{
         if(res.data.error){
            this.$message.error("添加失败！");
          }else{
            this.$message.success("添加成功！");
            this.$router.push('/membera')
          }
          this.con = "";
      })
    },

    handleChange(val){
     this.val=val[0]+','+val[1]
    },

    handleClose(tag){
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    handleInputConfirm(){
      let inputValue=this.inputValue;
      if (inputValue){
        this.dynamicTags.push(inputValue);
      }
        this.inputVisible = false;
        this.inputValue = "";
    },

    getgarde(){ //获取会员等级
      this.$axios({
        url:"gym/grade/all",
      }).then((res)=>{
       this.arr= res.data.data;
       console.log(res);
      })
    },

    getcoach(){  //获取教练
     this.$axios({
      url:"gym/coach/all",
        }).then((res)=>{
       this.arr1= res.data.data;
       console.log(this.arr1);
      })
    },

    getplace(){  //获取场地接口
     this.$axios({
      url:"/gym/venue/findAllSpace",
        }).then((res)=>{
       this.arr2= res.data.data;
       console.log(res);
      })
    },

     getdata(){
      console.log(this.id);
      this.id=this.$route.params.id
      this.$axios({
        url:'/gym/user/find',
        params:{
          id:this.id
        }
      }).then((res)=>{
            this.res=res.data.data
            this.formInline.region=this.res.grade_name,
            this.formInline.name=this.res.name,
            this.formInline.sex=this.res.sex,
            this.formInline.tel=this.res.phone,
            this.formInline.wechat=this.res.wechat,
            this.formInline.nickname=this.res.nickname,
            this.value1=this.res.birthday,
            this.formInline.idNumber=this.res.id_number,
            this.formInline.profession=this.res.job,
            this.formInline.height=this.res.height,
            this.formInline.weight=this.res.weight,
            this.formInline.autograph=this.res.autograph,
            this.radio1=this.res.experience
      })
    }
  },

  mounted(){
    // this.id = sessionStorage.getItem('idd');
    this.getgarde();
    this.getcoach();
    this.getdata();
    this.getplace()
  }
};
</script>

<style scoped lang="less">
#divmale {
  margin: 10px;
  border-radius: 5px 5px 0 0;
  border: 2px solid #dad9d9;
};

#tablediv {
  height: 20%;
  background: rgb(219, 219, 219);
  border-radius: 5px 5px 0 0;
  height: 30px;
  font-size:14px;
  span {
    float: left;
    line-height: 30px;
    margin-left:10px ;
  }
};

#el-button{
  margin-left: 92%;
  margin-bottom: 10px;
  background: white;
  color: #b3b3b3;
  border: 1px solid #d3dce6;
};

.upload-demo {
  width: 300px;
  height: 120px;
  margin: 10px auto;
  margin-top: 30px;
};

.el-icon-upload {
  font-size: 50px;
  width: 50px;
};

.el-form-item {
  margin-left: 10px;
};

.el-form {
  display: inline;
};

.el-input {
  width: 220px;
  margin: 10px;
};

#mleupload{
  margin:20px;
  margin-left: 80px;
  #mlespan2{
    margin: 10px;
  }
};

#radioel {
  margin: 10px 10px 10px -50px;
};

#radioel1 {
  margin:10px;
  margin-left: 20px;
};

.block {
  margin-left: 25px;
};

.el-cascader {
  margin: 10px 5px;
  width: 220px;
};


#mlebut1 {
  margin: 10px 10px 10px 50px;
};

#mlebut2 {
  line-height: 30px;
  margin:10px auto;
  width: 440px;
  height: 30px;
  p{
    float: left;
    display: inline;
  };
  el-tag{
    display: inline;
  }
};

.el-tag + .el-tag {
  margin-left: 5px;
};

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
};

#mleop {
  margin: 20px 10px 10px 30px;
};

#mlecb {
  margin: 20px 10px 10px 30px;
};

#mlap1{
  margin: 10px auto;
  margin-left: 30px;
  .el-input{
    width: 210px;
     margin-left:0px;
  }
};

#mlap2{
  margin: 10px auto;
  margin-left: 37px;
  .el-input{
    width: 210px;
     margin-left:0px;
  }
};

#mlap3{
  margin: 10px auto;
  margin-left: 10px;
  .el-input{
    width: 210px;
  }
};


#mlap4{
  margin: 10px auto;
  margin-left: 22px;
  .el-cascader{
    width: 210px;
     margin-left:0px;
  }
};

#mlap5{
  margin: 10px auto;
  margin-left: -5px;
  .el-input{
    width: 210px;
     margin-left:0px;
  }
};

#mlael1{margin-left:-50px};
</style>